<template>
	<view class="all">
		<view  style="height: 30rpx;background-color: #F2F2F2;"></view>
		<view>
			<view style="margin-left: 40rpx;font-weight: 500;color: #888888;font-size:small;margin-top: 20rpx;">
				<view>Status</view>
			</view>
			<view style="display: flex;justify-content: center;">
				<view style="background-color: #f2eed6;color:rgba(245, 192, 100, 0.8);border:rgba(245, 192, 100, 0.8) thin solid;margin-top: 10rpx;height: 60rpx;width: 300rpx;display: flex;justify-content: center;">
					<view style="margin-top: 10rpx;">Passed</view>
				</view>
			</view>
		</view>
		<view style="margin-left: 40rpx;font-weight: 500;color: #888888;font-size:small;margin-top: 20rpx;">
			<view>Date Range</view>
		</view>
		<view class="center" style="margin-top: 10rpx;">
			<view style="background-color: #FFFFFF;height: 80rpx;width: 700rpx;display:flex;justify-content:center;">
				<view style="font-size: 30rpx;margin-top: 20rpx;"><text> 2021-03-20 to 2021-05-10</text></view>
			</view>
		</view>
		
		<view style="margin-left: 40rpx;font-weight: 500;color: #888888;font-size:small;margin-top: 20rpx;">
			<view>Reason</view>
		</view>
		<view style="margin-top: 10rpx;display:flex;justify-content:center;">
			<view style="background-color: #FFFFFF;height: 80rpx;width: 700rpx;display:flex;justify-content:center;">
				<view style="font-size: 30rpx;margin-top: 20rpx;"><text>I want to play rather than work</text></view>
			</view>
		</view>
		
		<view style="margin-left: 40rpx;font-weight: 500;color: #888888;font-size:small;margin-top: 20rpx;">
			<view>Picture</view>
		</view>
		<u-image class="picture" mode="aspectFill" width="92%" height="300" src="../../static/Leave/exam.png"></u-image>
		
		<view style="margin-left: 40rpx;font-weight: 500;color: #888888;font-size:small;margin-top: 20rpx;">
			<view>Reply</view>
		</view>
		<view style="margin-top: 10rpx;display:flex;justify-content:center;">
			<view style="background-color: #FFFFFF;height: 80rpx;width: 700rpx;display:flex;justify-content:center;">
				<view style="font-size: 30rpx;margin-top: 20rpx;"><text>OK,just go play</text></view>
			</view>
		</view>
		
		<view style="display:flex;justify-content:center;">
			<button style="width: 250rpx; margin-top: 50rpx; background-color: #ffd36b;color: #ffffff;">Delete</button>
			<button style="width: 250rpx; margin-top: 50rpx; background-color: #ABC270;color: #ffffff;">Edit</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					text: 'Sick Leave',
					// color: 'blue',
					fontSize: 28,
					// subText: 'thanks'
				}, {
					text: 'Funeral Leave'
				}, {
					text: 'Parental Leave' 
				},{
					text: 'Annual Leave' 
				},{
					text: 'Alternative Leave' 
				}],
				show: false,
				typeLeave:"The type of Leave",
				leftdays:2,
				datetimerange: ["2021-03-20 00:00:00", "2021-05-10 00:00:00"],
				fileList3: [{
							url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}],
			}
		},
		
		methods:{
			//下拉框
			bindPickerChange: function(e) {		//改变的事件名
				//console.log('picker发送选择改变，携带值为', e.target.value)   用于输出改变索引值
				this.index = e.target.value			//将数组改变索引赋给定义的index变量
				this.jg=this.array[this.index]		//将array【改变索引】的值赋给定义的jg变量
			//	console.log("籍贯为：",this.jg)		//输出获取的籍贯值，例如：中国
			},
			click(index) {
				console.log(`click item${index + 1}，content：${this.list[index].text}`)
				this.typeLeave=this.list[index].text
			},
			navigateTo(url) {
			  uni.navigateTo({
				url,
			  });
			},
			
		}
	}
</script>
<style>
	page{
		background-color:  #f2f2f2;
	}
	.all{
		background-color: #f2f2f2;
		background-size: 100% 100%;
	}
	.type{
		width: 700rpx;
		margin-top: 50rpx;
		border: #F2F2F2;
	}
	.center{
		display:flex;
		justify-content:center;
	}
	.picture{
		box-shadow:0px -0.5px 3px #EEEEEE;
		border-bottom: #C0C4CC solid thin;
		border-top: #C0C4CC solid thin;
		margin-top: 10rpx;
		margin-left: 30rpx;
		border-radius: 10rpx;
	}
</style>
